import { Component, ViewChild, ComponentFactoryResolver, Input, OnInit, ViewContainerRef, SimpleChanges } from '@angular/core';

import { EventService } from '../../shared/service/event.service';

import { ComItem } from './com-item';
import { AppGlobalService } from 'src/app/shared/service/app-global.service';

@Component({
    selector: 'app-second',
    template: '<section>\n' +
        '<ng-template #secondComs></ng-template>\n' +
        '</section>'
})
export class SecondComsComponent implements OnInit {

    @Input() subComs: ComItem[];
    @ViewChild('secondComs', { read: ViewContainerRef }) myRef: ViewContainerRef;

    constructor(
        private componentFactoryResolver: ComponentFactoryResolver,
        public appGlobalService: AppGlobalService) {
    }

    ngOnInit() {
        if (this.appGlobalService.eventService.eventEmit.listenerCount("updateTagsData" + localStorage.getItem('currentPath')) > 0) {
            this.appGlobalService.eventService.eventEmit.removeListener("updateTagsData" + localStorage.getItem('currentPath'));
          }
        this.appGlobalService.eventService.eventEmit.on("updateTagsData" + localStorage.getItem('currentPath'),res =>{
            console.log("currentPath:" + localStorage.getItem('currentPath'))
            this.updateTagsData();
        });
    }
    updateTagsData() {

        let temArray:any = [];

        for (let i = 0; i < this.myRef.length; i++){
            const tagInstance = this.myRef.get(i)["_view"].nodes[1].instance;
            if (tagInstance.tagData && tagInstance.tagData.shellDataId && tagInstance.tagData.shellDataId !== "0") {
                if (this.appGlobalService.getShellData(tagInstance.tagData.shellDataId)) {
                    // tagInstance.tagData = this.getDemoData();
                    if (this.appGlobalService.getShellData(tagInstance.tagData.shellDataId).remove === "true"){
                        temArray.push(this.myRef.get(i));
                    } else {
                        tagInstance.tagData = this.appGlobalService.getShellData(tagInstance.tagData.shellDataId);
                    }

                  }
            }

        }
        if (temArray.length > 0 ) {
            temArray.forEach(element => {
                const index = this.myRef.indexOf(element)
                if (index >= 0) {
                    this.myRef.remove(index);
                    this.appGlobalService.deleteShellData(element["_view"].nodes[1].instance.tagData.shellDataId);
                    console.log("page appAnchor  remove tag:"+ element["_view"].nodes[1].instance.tagData.shellDataId);
                }
            });
        }
    }
    changData(tagData,v) {
        if (tagData.shellDataId && tagData.shellDataId !== "0") {

          if (this.appGlobalService.getShellData(tagData.shellDataId)) {
            v.tagData = this.appGlobalService.getShellData(tagData.shellDataId);
            this.appGlobalService.deleteShellData(tagData.shellDataId);
            return v.tagData; // this.appGlobalService.getShellData(tagData.shellDataId);
          } else {
            // debug
            // setTimeout(() => {
            //     this.updateTagsData();
            // }, 5000);
            // debug
            return tagData;
          }
    
        } else {
          return tagData;
        }
      }
    // tslint:disable-next-line:use-life-cycle-interface
    ngOnChanges(changes: SimpleChanges): void {
        this.loadComponent();
    }

    loadComponent() {
        const viewContainerRef = this.myRef;
        viewContainerRef.clear();
        this.subComs.forEach((v) => {
            const componentFactory = this.componentFactoryResolver.resolveComponentFactory(v.component);
            const componentRef = viewContainerRef.createComponent(componentFactory);
            (componentRef.instance).tagData = this.changData(v.tagData, v);
        });
    }
}
